$(function() {
    const SELECTID = `tpl-cate`;
    const IMAGEID = `#image`;
    const $image = $(IMAGEID);
    const ADDURL = `/my/article/add`;
    const GETURL = `/my/article/`;
    const EDITURL = `/my/article/edit`;
    let url;
    // 配置裁剪区选项
    const options = {
        // 纵横比
        aspectRatio: 11 / 7,
        // 指定预览区域
        preview: '.img-preview'
    }
    initEditor();
    initArticleSelect();
    initCover();
    chooseFile();
    editOrAdd();
    publishArt(url);
    //判断是编辑或添加
    function editOrAdd() {
        const param = location.href.split(`?`)[1];
        if (param) {
            //有参数说明是编辑
            url = EDITURL;
            Ajax(`get`, GETURL + param, {}, function(res) {
                layui.form.val(`edit`, res.data);
                $image.attr(`src`, baseURL + res.data.cover_img);
            });
        } else {
            //没有参数说明是添加
        }
    }
    //定义加载文章分类的方法
    function initArticleSelect() {
        Ajax(`get`, `/my/article/cates`, {}, function(res) {
            if (res.status) return layer.msg(res.message);
            const selectHtml = template(SELECTID, res.data);
            $(`select[name="cate_id"]`).html(selectHtml);
            layui.form.render(`select`);
        })
    }
    //初始化裁剪区的方法
    function initCover(imgURL) {
        imgURL ? $image.cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', imgURL) // 重新设置图片路径
            .cropper(options) : // 重新初始化裁剪区域
            // 创建裁剪区域
            $image.cropper(options);
    }
    //配置选择文件的方法
    function chooseFile() {
        const $btnChooseFile = $(`#btnChooseImage`);
        const $fileInput = $(`#coverFile`);
        $btnChooseFile.on(`click`, function() {
            $fileInput.trigger(`click`);
        });
        $fileInput.on(`change`, function() {
            const files = this.files;
            if (files.length) {
                const imgURL = URL.createObjectURL(files[0]);
                initCover(imgURL);
            } else {
                return layer.msg(`还没选择图片!`);
            }
        });
    }
    //发布文章或者保存文章的方法
    function publishArt(url) {
        const $form_Pub = $(`#form-pub`);
        let SAVE = `已发布`;
        $(`#btnSave2`).on(`click`, () => SAVE = `草稿`);
        $form_Pub.on(`submit`, function(e) {
            e.preventDefault();
            createData.call(this, SAVE, url);
        })
    }
    window.publishArt = publishArt;
    //创建文章的formdata数据
    function createData(state, url) {
        const formData = new FormData(this);
        let content = document.querySelector(`#content_ifr`).contentWindow.document.querySelector(`p`).innerHTML;
        formData.append(`content`, content);
        formData.append(`state`, state);
        //生成封面的blob格式数据
        $image.cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 400,
            height: 200
        }).toBlob(function(imgBlob) {
            //追加封面信息
            formData.append(`cover_img`, imgBlob);
            sendData(formData, url);
        });
    }
    //提交文章的数据
    function sendData(formData, url = ADDURL) {
        Ajax(`post`, url, formData, function(res) {
            layer.msg(res.message, { time: 1000 },
                function() {
                    if (url !== ADDURL) {
                        parent.closeThis();
                        return;
                    }
                    return (res.status) ? 0 : changeToArtList();
                });
        })
    }
    //切换到文章列表页
    function changeToArtList() {
        parent.$(`.art_list`).find(`span`).trigger(`click`);
    }
})